{layout name="layout"}
<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
  <!-- <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a> -->
</script>

<script id="addForm" type="text/html">
  <div class="layer-form">
    <form class="layui-form layui-form-pane">

      <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
          <input type="text" name="username" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="password" name="password" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
          <input type="text" name="nickname" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">QQ</label>
        <div class="layui-input-block">
          <input type="text" name="qq" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">b站uid</label>
        <div class="layui-input-block">
          <input type="text" name="bilibili_uid" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">职位</label>
        <div class="layui-input-block">
          <select name="group_id" id="add_group_id"  lay-verify="required">
            
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <select name="state_id" id="add_state_id"  lay-verify="required">
            
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="addSubmit">确认</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </form>
  </div>
</script>

<script id="editForm" type="text/html">
  <div class="layer-form">
    <form class="layui-form layui-form-pane" lay-filter="editForm">
      
      <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
          <input type="text" name="username" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
          <input type="text" name="nickname" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">QQ</label>
        <div class="layui-input-block">
          <input type="text" name="qq" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">b站uid</label>
        <div class="layui-input-block">
          <input type="text" name="bilibili_uid" autocomplete="off" placeholder="请输入" lay-verify="required"
                 class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">职位</label>
        <div class="layui-input-block">
          <select name="group_id" id="edit_group_id"  lay-verify="required">
            
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <select name="state_id" id="edit_state_id"  lay-verify="required">
            
          </select>
        </div>
      </div>


      <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="editSubmit">确认</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </form>
  </div>
</script>

<script src="/static/md5/md5.min.js"></script>
<script>
  window.onload = () => {
    layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
      //得到各种内置组件
      var layer = layui.layer //弹层
        ,
        laypage = layui.laypage //分页
        ,
        laydate = layui.laydate //日期
        ,
        table = layui.table //表格
        ,
        carousel = layui.carousel //轮播
        ,
        upload = layui.upload //上传
        ,
        element = layui.element //元素操作
        ,
        slider = layui.slider //滑块
        ,
        dropdown = layui.dropdown //下拉菜单
        , form = layui.form;




      //执行一个 table 实例
      table.render({
        elem: '#demo',
        url: "{:url('/member/system/listuser')}" //数据接口
        ,
        page: true //开启分页
        ,
        toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        ,
        totalRow: true //开启合计行
        ,
        cols: [
          [ //表头
            {
              type: 'checkbox',
              fixed: 'left'
            }, {
              field: 'id',
              title: '#',
              width: 80,
              sort: true,
              fixed: 'left'
            },
            {
              field: 'username',
              title: '账号'
            },
            {
              field: 'nickname',
              title: '昵称'
            },
            {
              field: 'qq',
              title: 'QQ'
            },
            {
              field: 'bilibili_uid',
              title: 'b站uid'
            },
            {
              field: 'group_name',
              title: '职务'
            },
            {
              field: 'state_name',
              title: '状态'
            },
            {
              fixed: 'right',
              width: 150,
              align: 'center',
              toolbar: '#barDemo'
            }
          ]
        ]
      });

      //监听头工具栏事件
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id),
          data = checkStatus.data; //获取选中的数据
        switch (obj.event) {
          case 'add':
            let layero = layer.open({
              type: 1,
              area: ['50%', '80%'], // 宽高
              content: $("#addForm").html(),
              success: () => {

                $.ajax({
                  url: "{:url('/member/system/loadstateselect')}",
                  success: res => {
                    let htmlStr = "<option></option>";
                    let arr = res.data;
                    $.each(arr, (i, v) => {
                      htmlStr += "<option value=" + v.id + ">" + v.state_name + "</option>";
                    });
                    $("#add_state_id").html(htmlStr);
                    form.render();
                  }
                });


                $.ajax({
                  url: "{:url('/member/system/loadgroupselect')}",
                  success: res => {
                    let htmlStr = "<option></option>";
                    let arr = res.data;
                    $.each(arr, (i, v) => {
                      htmlStr += "<option value=" + v.id + ">" + v.group_name + "</option>";
                    });
                    $("#add_group_id").html(htmlStr);
                    form.render();
                  }
                });



                form.on('submit(addSubmit)', function (data) {
                  var field = data.field; // 获取表单字段值

                  let sdata = { ...field };
                  sdata.password = md5(sdata.password);

                  $.ajax({
                    url: "{:url('/member/system/adduser')}",
                    type: "POST",
                    data: sdata,
                    success: function (res) {
                      if (res.code === 0) {
                        layer.msg(res.msg, { icon: 1 });
                        table.reload("demo");
                      } else {
                        layer.msg(res.msg, { icon: 2 });
                      }
                    }
                  })

                  return false; // 阻止默认 form 跳转
                });
              }
            });
            break;
          case 'update':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else if (data.length > 1) {
              layer.msg('只能同时编辑一个');
            } else {
              let layero = layer.open({
                type: 1,
                area: ['50%', '80%'], // 宽高
                content: $("#editForm").html(),
                success: () => {
                  let temp = checkStatus.data[0];
                  form.val('editForm', {
                    "username": temp.username,
                    "nickname": temp.nickname,
                    "qq": temp.qq,
                    "bilibili_uid": temp.bilibili_uid,
                  });

                  $.ajax({
                    url: "{:url('/member/system/loadstateselect')}",
                    success: res => {
                      let htmlStr = "<option></option>";
                      let arr = res.data;
                      $.each(arr, (i, v) => {
                        if (temp.state_id == v.id) {
                          htmlStr += "<option value=" + v.id + " selected>" + v.state_name + "</option>";
                        } else {
                          htmlStr += "<option value=" + v.id + ">" + v.state_name + "</option>";
                        }
                      });
                      $("#edit_state_id").html(htmlStr);
                      form.render();
                    }
                  });


                  $.ajax({
                    url: "{:url('/member/system/loadgroupselect')}",
                    success: res => {
                      let htmlStr = "<option></option>";
                      let arr = res.data;
                      $.each(arr, (i, v) => {
                        if (temp.group_id == v.id) {
                          htmlStr += "<option value=" + v.id + " selected>" + v.group_name + "</option>";
                        } else {
                          htmlStr += "<option value=" + v.id + ">" + v.group_name + "</option>";
                        }

                      });
                      $("#edit_group_id").html(htmlStr);
                      form.render();
                    }
                  });



                  form.on('submit(editSubmit)', function (data) {
                    var field = data.field; // 获取表单字段值
                    field.id = temp.id;

                    $.ajax({
                      url: "{:url('/member/system/editUser')}",
                      type: "POST",
                      data: field,
                      success: function (res) {
                        if (res.code === 0) {
                          layer.msg(res.msg, { icon: 1 });
                          table.reload("demo");
                        } else {
                          layer.msg(res.msg, { icon: 2 });
                        }
                      }
                    })

                    return false; // 阻止默认 form 跳转
                  });
                }
              });
            }
            break;
          case 'delete':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else {
              let ids = [];
              $.each(data, (i, v) => {
                ids.push(v.id);
              });
              $.ajax({
                url: "{:url('/member/system/softdeleteUser')}",
                data: { ids },
                type: "post",
                success: res => {
                  if (res.code === 0) {
                    layer.msg(res.msg, { icon: 1 });
                    setTimeout(() => {
                      window.location.reload();
                    }, 1500);
                  } else {
                    layer.msg(res.msg, { icon: 2 });
                  }
                }
              });

            }
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
          ,
          layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'edit') {
          let layero = layer.open({
            type: 1,
            area: ['50%', '80%'], // 宽高
            content: $("#editForm").html(),
            success: () => {
              let temp = data;
              form.val('editForm', {
                "username": temp.username,
                "nickname": temp.nickname,
                "qq": temp.qq,
                "bilibili_uid": temp.bilibili_uid,
              });

              $.ajax({
                url: "{:url('/member/system/loadstateselect')}",
                success: res => {
                  let htmlStr = "<option></option>";
                  let arr = res.data;
                  $.each(arr, (i, v) => {
                    if (temp.state_id == v.id) {
                      htmlStr += "<option value=" + v.id + " selected>" + v.state_name + "</option>";
                    } else {
                      htmlStr += "<option value=" + v.id + ">" + v.state_name + "</option>";
                    }
                  });
                  $("#edit_state_id").html(htmlStr);
                  form.render();
                }
              });


              $.ajax({
                url: "{:url('/member/system/loadgroupselect')}",
                success: res => {
                  let htmlStr = "<option></option>";
                  let arr = res.data;
                  $.each(arr, (i, v) => {
                    if (temp.group_id == v.id) {
                      htmlStr += "<option value=" + v.id + " selected>" + v.group_name + "</option>";
                    } else {
                      htmlStr += "<option value=" + v.id + ">" + v.group_name + "</option>";
                    }

                  });
                  $("#edit_group_id").html(htmlStr);
                  form.render();
                }
              });



              form.on('submit(editSubmit)', function (data) {
                var field = data.field; // 获取表单字段值
                field.id = temp.id;

                $.ajax({
                  url: "{:url('/member/system/editUser')}",
                  type: "POST",
                  data: field,
                  success: function (res) {
                    if (res.code === 0) {
                      layer.msg(res.msg, { icon: 1 });
                      table.reload("demo");
                    } else {
                      layer.msg(res.msg, { icon: 2 });
                    }
                  }
                })

                return false; // 阻止默认 form 跳转
              });
            }
          });

        } else if (layEvent === 'delete') {
          let id = data.id;
          let ids = [];
          ids.push(id);
          $.ajax({
            url: "{:url('/member/system/softdeleteUser')}",
            data: { ids },
            type: "post",
            success: res => {
              if (res.code === 0) {
                layer.msg(res.msg, { icon: 1 });
                setTimeout(() => {
                  window.location.reload();
                }, 1500);
              } else {
                layer.msg(res.msg, { icon: 2 });
              }
            }
          });
        }
        else if (layEvent === 'more') {
          //下拉菜单
          dropdown.render({
            elem: this //触发事件的 DOM 对象
            ,
            show: true //外部事件触发即显示
            ,
            data: [{
              title: '编辑',
              id: 'edit'
            }, {
              title: '删除',
              id: 'del'
            }],
            click: function (menudata) {
              if (menudata.id === 'del') {
                layer.confirm('真的删除行么', function (index) {
                  obj.del(); //删除对应行（tr）的DOM结构
                  layer.close(index);
                  //向服务端发送删除指令
                });
              } else if (menudata.id === 'edit') {
                layer.msg('编辑操作，当前行 ID:' + data.id);
              }
            },
            align: 'right' //右对齐弹出（v2.6.8 新增）
            ,
            style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
          })
        }
      });




    });

  };
</script>